<template>
   <div  class="container">
  <h1>数据双向绑定</h1>
  <h1>{{obj.name}}</h1>
  <h1>{{obj.age}}</h1>
 <button @click="updateName">修改姓名</button>
   </div>
</template>

<script>
import {reactive} from 'vue'
export default {
name:'App',

setup() {
//将普通数据->响应数据 
// reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
// reactive函数 包裹即可。一般是将对象处理成响应式对象
//   const obj={
//    name:'ls',
//    age:18
//   }
  const obj = reactive({
   name:'ls',
   age:18
  })
  修改姓名
const updateName=()=>{
   console.log('updateName');
   obj.name='zs'
}
return {obj,updateName}
},

}
</script>

<style>

</style>